<template>
  <div class="panel">
    <div
      v-for="(item, index) in tabVlaue"
      :key="index"
      @click="setCruuent(item.id)"
      class="item-box hw-click-cursor"
      :class="{ 'item-box-active': item.id == props.modelValue }"
    >
      <i class="doorIcon" v-if="index === 0">&#xe680;</i>
      <i class="doorIcon" v-else>&#xe682;</i>
      <!-- <i class="doorIcon" v-else>&#xe682;</i> -->
      <!-- <img :src="item.img + ''" alt="" /> -->
      <p style="font-family: PingFangSC-Regular, PingFang SC Microsoft YaHei">{{ item.name }}</p>
      <p style="font-family: PingFangSC-Regular, PingFang SC Microsoft YaHei">{{ item.subName }}</p>
      <div class="solid-box"></div>
      <div class="freeTime" v-if="index === 1">限免</div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getEditRightTab } from '@/utils/templateEdit';
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { urls } from '@/utils/request/upload';
import { tabList, tabList2 } from '../../data';
import { useProjectStore } from '@/store';

const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  modelValue: {
    type: Number,
  },
});
const emit = defineEmits(['update:modelValue']);

const setCruuent = (e: Number) => {
  emit('update:modelValue', e);
  var dom = document.getElementById('right-scroll-template-tab');
  if (dom) {
    dom.scrollTop = 0;
  }
  if (!store.glanceOver) {
    store.setglanceOver();
  }
};
// watch(
//   route,
//   () => {
//     console.log(route.meta.templateId);
//   },
//   { deep: true },
// );
const tabVlaue = computed(() => {
  //tab现所有模版一致
  let tab = [
    {
      name: '基础设置',
      // subName: '设置',

      id: 1,
      img: 'https://static.jiyi.show/assets/img/tabicon1.png',
    },

    {
      name: '高级组件',
      // subName: '样式',
      id: 3,
      img: 'https://static.jiyi.show/assets/img/tabicon3.png',
    },
  ];
  // let tab = getEditRightTab(route.meta.templateId);
  return tab;
  // if (
  //   route.meta.templateId == 395741054230597 ||
  //   route.meta.templateId == 410276243316805 ||
  //   route.meta.templateId == 666 ||
  //   route.meta.templateId == 123456789 ||
  //   route.meta.templateId == 99999 ||
  //   route.meta.templateId == 1010 ||
  //   route.meta.templateId == 888 ||
  //   route.meta.templateId == 1997
  // ) {
  //   return tabList2;
  // } else {
  //   return tabList;
  // }
});
</script>

<style lang="less" scoped>
.panel {
  width: 100%;
  height: 100%;
  // padding: 0 4px;
  box-shadow: inset 1px 0px 0px 0px #f0f0f0;

  // padding-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.t-collapse-panel__content) {
  padding-bottom: 16px;
}

.item-box {
  position: relative;
  // padding: 10px 0px;
  // border-radius: 4px;
  // margin-bottom: 4px;
  width: 50%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;

  .doorIcon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.59);
    margin-right: 4px;
  }
  p {
    font-size: 16px;
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.59);
    line-height: 24px;
  }
  img {
    width: 19px;
    height: 19px;
    margin-bottom: 5px;
  }
  .solid-box {
    display: none;
    position: absolute;
    bottom: -8px;
    margin: 0 auto;
    width: 24px;
    height: 16px;
    box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
  }
}
.item-box-active {
  background: #fff;
  // box-shadow: 1px 0px 0px 0px #f0f0f0 inset;
}
.item-box:hover {
  // background: #f0f0f0;
}
.title2 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
.freeTime {
  width: 32px;
  height: 18px;
  background-color: #e62b17;
  border-radius: 4px;
  position: absolute;
  right: 13px;
  top: 2px;
  color: #fff;
  font-family: 'PingFang SC';
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  line-height: 18px; /* 150% */
}
.panel-pass {
  :deep(.item-box) {
    width: calc(100% - 2px) !important;
  }
}
</style>
